<template>
	<!-- 优惠券组件 -->
	<view class="coupon img-size-repeat flex-center-between" :class="{'disabled': alldata.useStatus !== 0}" v-if="alldata">
		<view class="left">
			<view class="coupon-text flex-center">
				<view class="text-money fontb" :class="{'disabled-666': alldata.useStatus !== 0}">{{ alldata.amount }}元</view>
				<view class="flex-column-between">
					<view class="font32 color333" :class="{'disabled-666': alldata.useStatus !== 0}">{{ alldata.note }}</view>
					<view class="font26 color333" :class="{'disabled-666': alldata.useStatus !== 0}">{{ handleType(alldata.useType) }}</view>
				</view>
			</view>
			<view class="time font24 color666" :class="{'disabled-999': alldata.useStatus !== 0}">{{ alldata.startTime }} - {{ alldata.endTime }}</view>
		</view>
		<view class="right flex-center">
			<button class="coupon-btn font28" :class="cls[alldata.useStatus]" @tap="goUse">{{ text[alldata.useStatus] }}</button>
		</view>
	</view>
</template>

<script>
import Api from '@/common/api'
export default {
	data() {
		return {
			cls: ['btn-go', 'btn-over', 'btn-over'],
			text: ['去使用', '已使用', '已失效'],
		}
	},
	methods: {
		// 处理分类
		handleType(type) {
			let txt = ''
			switch(type) {
				case 0: 
					txt = '全场通用'
					break
				case 1: 
					txt = '指定分类'
					break
				case 2: 
					txt = '指定商品'
					break
				case 3: 
					txt = '指定商家'
					break
			}
			return txt
		},
		// 去使用
		goUse() {
			if(!this.type) {
				uni.reLaunch({ url: '/pages/index/index' })
			}
		},
	},
	props: ['alldata']
}
</script>

<style lang="scss">
.disabled-666 {
	color: #666 !important;;
}
.disabled-999 {
	color: #999 !important;
}
.coupon {
	padding: 24rpx 33rpx;
	margin: 0 auto 20rpx;
	width: 710rpx;
	height: 234rpx;
	background-image: url('/static/image/selectcoupon.png');
	&.disabled {
		background-image: url('/static/image/disabledcoupon.png');
	}
	.left {
		padding: 50rpx 0 14rpx;
		.coupon-text {
			height: 70rpx;
			.text-money {
				width: 196rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 60rpx;
				color: #C53624;
			}
		}
		.time {
			margin-top: 28rpx;
			padding-left: 53rpx;
		}
	}
	.right {
		height: 100%;
		.coupon-btn {
			padding: 0;
			width: 134rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 31rpx;
			letter-spacing: 0.82rpx;
			&::after {
				border: 0;
			}
		}
		.btn-go {
			color: #7A3F00;
			background:linear-gradient(180deg,rgba(255,222,176,1) 0%,rgba(238,177,113,1) 100%);
			box-shadow: inset 0px 1px 1px 0px rgba(255, 254, 254, 0.5);
		}
		.btn-over {
			color: #fff;
			background-color: #A2A2A2;
			box-shadow: inset 0px 1px 1px 0px rgba(255, 254, 254, 0.5);
		}
	}
}
</style>
